<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Array对象</title>
    <link rel="shortcut icon" href="../../../../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../../css/datatype.css">
</head>

<body>
    <div id="nav">
        <ul>
            <li><a href="./math.html">Math</a></li>
            <li><a href="./string.html">String</a></li>
            <li><a href="./object.html">Object</a></li>
            <li><a href="./array.html">Array</a></li>
            <li><a href="./date.html">Date</a></li>
        </ul>
        <div id="back">
            <a href="../../index.html">返回首页</a>
        </div>
    </div>
    <div class="container">
        <h2>使用数组来实现<b>队列</b> ，综合考虑使用数组的 push，pop，shift，unshift操作</h2>
        <hr>
        <input class="queue-input" type="text">
        <p class="queue-cont">队列内容：apple-&gt;pear</p>
        <p><small>tips: 队头在最右侧，中间用 -&gt; 连接</small></p>
        <button class="in-btn">入队</button>
        <button class="out-btn">出队</button>
        <button class="font-btn">打印队头元素内容</button>
        <button class="empty-btn">判断队列是否为空</button>
        <br>
        <input class="queue-input" type="text">
        <p class="queue-cont">队列内容：apple&lt;-pear</p>
        <p><small>tips: 队头在最左侧，中间用 - 连接</small></p>
        <button class="in-btn">入队</button>
        <button class="out-btn">出队</button>
        <button class="font-btn">打印队头元素内容</button>
        <button class="empty-btn">判断队列是否为空</button>

        <h2>使用数组来实现<b>栈</b> ，综合考虑使用数组的 push，pop，shift，unshift操作</h2>
        <hr>
        <input class="stack-input" type="text">
        <p class="stack-cont">栈内容：apple-&gt;pear</p>
        <p><small>tips: 栈顶在最右侧，中间用 -&gt; 连接</small></p>
        <button class="push-btn">进栈</button>
        <button class="pop-btn">退栈</button>
        <button class="stack-font-btn">打印栈顶元素内容</button>
        <button class="stack-empty-btn">判断栈是否为空</button>
        <br>
        <input class="stack-input" type="text">
        <p class="stack-cont">栈内容：apple&lt;-pear</p>
        <p><small>tips: 栈顶在最左侧，中间用 &lt;- 连接</small></p>
        <button class="push-btn">进栈</button>
        <button class="pop-btn">退栈</button>
        <button class="stack-font-btn">打印栈顶元素内容</button>
        <button class="stack-empty-btn">判断栈是否为空</button>

        <h2>排序</h2>
        <hr>
        <pre><code>
        var arr = [43, 54, 4, -4, 84, 100, 58, 27, 140]; // 从大到小以及从小到大进行排序
        var arr = ['apple', 'dog', 'cat', 'car', 'zoo', 'orange', 'airplane']; // 按字母顺序a-z及z-a进行排序
        var arr = [[10, 14], [16, 60], [7, 44], [26, 35], [22, 63]]; // 按照每个元素中第二个数从大到小的顺序进行排序输出
        var arr = [
            {
                id: 1,
                name: 'candy',
                value: 40
            }, {
                id: 2,
                name: 'Simon',
                value: 50
            }, {
                id: 3,
                name: 'Tony',
                value: 45
            }, {
                id: 4,
                name: 'Annie',
                value: 60
            }
        ];  // 按元素对象的value值从小到大进行排序
        </code></pre>
        <p>排序结果：</p>
        <pre id="sortresult"></pre>
        <h2>数据转换</h2>
        <hr>
        <pre><code>
            // 案例一：转换前
            var scoreObject = {
                "Tony": {
                    "Math": 95,
                    "English": 79,
                    "Music": 68
                }, 
                "Simon": {
                    "Math": 100,
                    "English": 95,
                    "Music": 98
                }, 
                "Annie": {
                    "Math": 54,
                    "English": 65,
                    "Music": 88
                }
            }
            // 案例一：转换后
            var scoreArray = [
                ["Tony", 95, 79, 68],
                ……
            ];

            // 案例二：转换前
            var menuArr = [
                [1, "Area1", -1],
                [2, "Area2", -1],
                [3, "Area1-1", 1],
                [4, "Area1-2", 1],
                [5, "Area2-1", 2],
                [6, "Area2-2", 2],
                [7, "Area1-2-3", 4],
                [8, "Area2-2-1", 6],
            ];
            // 案例二：转换后
            var menuObject = {
                "1": {
                    name: "Area1",
                    subMenu: {
                        "3": {
                            name: "Area1-1"
                        },
                        "4": {
                            name: "Area1-2",
                            subMenu: {
                                "7": {
                                    name: "Area1-2-3"
                                }
                            }
                        }
                    }
                }
                ……
            }
        </code></pre>
        <p>查看结果在console中</p>
    </div>

    <script src="../../js/datatype.js"></script>
    <script src="../../js/array.js"></script>
</body>

</html>